﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title>Knockout+ jQuery UI examples</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        .container{
            margin: 50px;
        }

        .draggable{
            width: 20px; height: 20px; background-color: red;
        }
        .droppable{
            width: 200px; height: 200px; background-color: gray;
        }

        .hovered{
            background-color: yellow;
        }

        .dragging{
            background-color: blue;
        }
    </style>

    <!-- Dependencies -->
    <script src="dependencies/jquery-1.11.0.min.js"></script>
    <script src="dependencies/jquery-ui-1.10.4/ui/jquery-ui.js"></script>
    <script src="dependencies/knockout-3.0.0.js"></script>

    <!-- Knockout+ jQuery UI -->
    <script src="knockoutplus/knockoutpuls.jqueryui.1.2.0.js"></script>
    <!-- /Knockout+ core -->

    <!-- Apply view model -->
    <script>
        function DraggableViewModel()
        {
            var $private = this;
            var $public = {};

            $public.isDragging = ko.observable();

            $public.revert = function (vm)
            {
                return !confirm("Accept drop here?");
            }

            return $public;
        }

        function DroppableViewModel()
        {
            var $private = this;
            var $public = {};

            $public.accept = function (vm)
            {
                return true;
            }

            $public.drop = function (event, ui)
            {
                var vm = ui.draggable.data('draggedObj');

                if (!confirm("Accept drop?"))
                {
                    return true;
                }

                return false;
            }

            return $public;
        }

        $(function ()
        {
            $(".draggable").each(function () { ko.applyBindings(new DraggableViewModel(), this); });
            $(".droppable").each(function () { ko.applyBindings(new DroppableViewModel(), this); });
        });
    </script>
    <!-- /Apply view model -->
</head>

<body>
    <div class="container">
        <h2>Binding types: drag/drop</h2>
        <p>This bindings allow to implement drag and drop feature using jQuery UI draggable and droppabe interactions.</p>
        <br />

        <strong>Only dragging example:</strong>
        <pre>&lt;div class=&quot;draggable&quot; data-bind=&quot;drag: true&quot;&gt;&lt;/div&gt;</pre>
        <div class="draggable" data-bind="drag: true"></div>
        <br />

        <strong>Basic drag and drop example:</strong>
        <pre>&lt;div class=&quot;draggable&quot; data-bind=&quot;drag: true&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;droppable&quot; data-bind=&quot;drop: { options: { drop: drop } }&quot;&gt;&lt;/div&gt;</pre>
        <div class="draggable" data-bind="drag: true"></div>
        <div class="droppable" data-bind="drop: { options: { drop: drop } }"></div>
        <br />

        <strong>Full example with accepting drop, reverting, tracking dragging and indicating hover:</strong>
        <pre>&lt;div class=&quot;draggable&quot; data-bind=&quot;drag: { isDragging: isDragging, options: { revert: &#39;invalid&#39; } }&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;droppable&quot; data-bind=&quot;drop: { options: { accept: accept, drop: drop, hoverClass: &#39;hovered&#39; } }&quot;&gt;&lt;/div&gt;
        </pre>

        <div class="draggable" data-bind="drag: { isDragging: isDragging, options: { revert: 'invalid' } }, css: { 'dragging': isDragging }"></div>
        <div class="droppable" data-bind="drop: { options: { accept: accept, drop: drop, hoverClass: 'hovered' } }"></div>
        <br />
    </div>
</body>
</html>
